<template>
  <div class="ele-body">
    <div style="display: flex; justify-content: space-between">
      <three-school :activeList="activeList" load-school @click="schoolChange" visible="threeSchoolVisible=$event"></three-school>
      <el-card shadow="never" style="width: 100%">
        <div :style="threeSchoolVisible ? '' : 'padding-left: 16px'">
          <b style="margin-bottom:4px; display: inline-block;">所属学校：{{ schoole_name || '暂无学校' }}</b>
          <el-form
              inline size="mini"
              :model="query"
              class="ele-form-search"
              @keyup.enter.native="reload"
              @submit.native.prevent>
            <el-form-item label="年级:">

              <el-select style="width:100%" clearable
                         :disabled="!query.schoole_id"
                         v-model="query.grade_id"
                         placeholder="请输入年级">
                <el-option :value="item.id" :label="item.title" v-for="(item,index) in gradeList" :key="index"/>
              </el-select>
            </el-form-item>
            <el-form-item label="班级:">

              <el-select style="width:100%" clearable
                         :disabled="!query.grade_id"
                         v-model="query.class_id"
                         placeholder="请输入班级">
                <el-option :value="item.id" :label="item.title" v-for="(item,index) in classList" :key="index"/>
              </el-select>
            </el-form-item>
            <el-form-item label="性别:">
              <el-select
                  clearable
                  v-model="query.gender"
                  placeholder="请选择性别"
                  class="ele-fluid">
                <el-option label="男" :value="1"/>
                <el-option label="女" :value="2"/>
                <el-option label="未知" :value="0"/>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-date-picker
                  style="width: 125px"
                  clearable
                  v-model="query.belong_time"
                  type="date"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="">
              <el-input
                  clearable
                  v-model="query.keywords"
                  placeholder="输入姓名或学号等关键字"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                  type="primary"
                  icon="el-icon-search"
                  class="ele-btn-icon"
                  @click="reload">查询
              </el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
          <div class="toolbar-box" style="margin-bottom:4px;">
            <div class="tool-btn">
              <el-button
                  size="mini"
                  type="default"
                  icon="el-icon-download"
                  class="ele-btn-icon"
                  @click="exportExcel">导出
              </el-button>
            </div>
          </div>
          <!-- 数据表格 -->
          <el-table
              border
              lazy
              ref="table"
              :data="data"
              v-loading="loading"
              height="calc(100vh - 315px)"
          >
            <el-table-column label="序号" width="55" align="center" type="index">
              <template slot-scope="scope">
                <span
                    v-text="$setTableIndex(query.page, query.limit, scope.$index)"
                >
                </span>
              </template>
            </el-table-column>
            <el-table-column label="日期" align="center" prop="belong_time" >
              <template slot-scope="scope">{{$util.toDateString(scope.row.belong_time)}}</template>
            </el-table-column>
            <el-table-column label="姓名" align="center" prop="name" />
            <el-table-column label="学号" align="center" prop="student_no" />
            <el-table-column label="性别" align="center" prop="gender" >
              <template slot-scope="scope">{{scope.row.gender===0?'未知':scope.row.gender===1?'男':scope.row.gender===2?'女':''}}</template>
            </el-table-column>
            <el-table-column label="年级" align="center" prop="grade_name" />
            <el-table-column label="班级" align="center" prop="class_name" />
            <el-table-column label="学校" align="center" prop="schoole_name" />
            <el-table-column label="离家时间" align="center" prop="home_out_time" >
              <template slot-scope="scope">{{$util.toDateString(scope.row.home_out_time)}}</template>
            </el-table-column>
            <el-table-column label="到家时间" align="center" prop="home_arrive_time" >
              <template slot-scope="scope">{{$util.toDateString(scope.row.home_arrive_time)}}</template>
            </el-table-column>
            <el-table-column label="到校时间" align="center" prop="school_arrive_time" >
              <template slot-scope="scope">{{$util.toDateString(scope.row.school_arrive_time)}}</template>
            </el-table-column>
            <el-table-column label="离校时间" align="center" prop="school_out_time" >
              <template slot-scope="scope">{{$util.toDateString(scope.row.school_out_time)}}</template>
            </el-table-column>
            <el-table-column label="在校时间" align="center" prop="school_time" >
            </el-table-column>
            <el-table-column label="步数" align="center" prop="steps" />
            <!-- <el-table-column label="卡路里" align="center" prop="trip"></el-table-column> -->
            <!-- <el-table-column
            label="体温"
            align="center"
            fixed="right"
            :resizable="true"
          >
          <template slot-scope="{row}">
            <el-link
                type="text"
                :underline="false"
                @click="temperatureLook(row)">查看
              </el-link>
            </template>
            </el-table-column>
          <el-table-column
            label="心率"
            align="center"
            fixed="right"
            :resizable="true"
          >
          <template slot-scope="{row}">
            <el-link
                type="text"
                :underline="false"
                @click="heartRateLook(row)">查看
              </el-link>
            </template>
            </el-table-column>-->
          </el-table>
          <pagination
              :total="total"
              :page.sync="query.page"
              :limit.sync="query.limit"
              @pagination="getData"
          />
        </el-card>
    </div>
  <!-- 体温弹窗 -->
  <temperature-look
      :data="current1"
      :visible.sync="showEdit1"
      @done="reload"/>
    <!-- 心率弹窗 -->
    <heartRate-look
      :data="current2"
      :visible.sync="showEdit2"
      @done="reload"/>
      
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import heartRateLook from './heartRate-look';
import temperatureLook from './temperature-look'
import threeSchool from "@/components/three_schoole.vue";

export default {
  name: 'SystemSchool',
  components: {threeSchool,heartRateLook,temperatureLook},
  computed: {
    ...mapGetters(["permission"]),
  },
  data() {
    return {
      threeSchoolVisible: true,
      row_span: 20, 
      activeList:[],
      loading: false, // 表格加载状态
      selection: [], // 表格选中数据
      total: 0, // 数据总数
      data: [], // 表格数据接口
      // 表格搜索条件
      query: {
        page: 1,
        limit: 10,
        province_code:'',
        city_code:'',
        district_code:'',
        streets_code:'',
        schoole_id:'',
        grade_id:'',
        class_id:'',
        gender:''
      },
      // streetsList: [],
      schoolList: [],
      gradeList: [],
      classList:[],
      // 当前编辑数据
      current1: null,
      current2: null,
      showEdit1: false,
      showEdit2: false,
      schoole_name: '',
      schoole_id:''
    };
  },
  mounted() {
    this.getDataInt();
  },
  watch: {
    // 'query.streets_code': {
    //   handler: function () { 
    //         this.getSchoolList()
    //   },
    //   deep:true
    // },
     'query.schoole_id': {
      handler: function () { 
            this.getGradeList()
      },
      deep:true
    },
     'query.grade_id': {
      handler: function () { 
            this.getClassList()
      },
      deep:true
     }
  },
  methods: {
    getDataInt() { 
      this.$http
      .get("/schoole/index", {
        params: {
          page: 1,
          limit: 1,
        },
      })
      .then((res) => {
        if (res.data.count == 0) return;
        this.schoole_name=res.data.data[0].title
        this.schoole_id=res.data.data[0].id
        this.query = {
          page: 1,
          limit: 20,
          title: "",
          schoole_id: res.data.data[0].id,
          schoole_name: res.data.data[0].title,
        };
        this.activeList = [
          res.data.data[0].province_code,
          res.data.data[0].city_code,
          res.data.data[0].district_code,
          res.data.data[0].streets_code,
        ];
        this.getData();
      })
      .catch((e) => {
        this.loading = false;
        this.$message.error(e.message);
      });
    },
    schoolChange(data) {
      this.query = {
        page: 1,
        limit: 10,
        title: "",
        schoole_id: data.value,
        schoole_name: data.label,
      };
      this.schoole_name=data.label
      this.schoole_id=data.value
      this.getData();
    },
    // getSchoolList() {
    //   this.$http
    //     .get("/user/getSchoolList", { params: { streets_code:this.query.streets_code } })
    //     .then(res => {
    //       this.schoolList = res.data.data;
    //     })
    //     .catch(e => {
    //       this.$message.error(e.message);
    //     });
    // },
    getGradeList() {
      this.$http
        .get("/student/getGrade", { params: { schoole_id: this.query.schoole_id} })
        .then(res => {
          this.gradeList = res.data.data;
        })
        .catch(e => {
          this.$message.error(e.message);
        });
    },
    getClassList() {
      this.$http
        .get("/student/getClass", { params: { grade_id: this.query.grade_id,schoole_id:this.query.schoole_id } })
        .then(res => {
          this.classList = res.data.data;
        })
        .catch(e => {
          this.$message.error(e.message);
        });
    },
     /* 获取表格数据 */
     getData() {
      this.loading = true;
      this.$http
        .get("/studentworklog/index", { params: this.query })
        .then(res => {
          this.loading = false;
          this.total = res.data.count;
          this.data = res.data.data;
        })
        .catch(e => {
          this.loading = false;
          this.$message.error(e.message);
        });
    },
     /* 查询数据 */
     reload() {
      this.getData();
    },
    /* 重置搜索 */
    reset() {
      this.query = {
        page: 1,
        limit: 10,
        schoole_name: this.schoole_name,
        schoole_id:this.schoole_id
      };
      this.reload();
    },
    /* 显示编辑 */
    temperatureLook(row) {
      this.current1 = row;
      this.showEdit1 = true;
    },
    heartRateLook(row) {
      this.current2 = row;
      this.showEdit2 = true;
    },
    /* 导出数据Excel */
    exportExcel() {
      let info = JSON.parse(JSON.stringify(this.query));
      this.$http
        .get("/studentworklog/exportExcel", info)
        .then((res) => {
          let data = res.data;
          if (data.code == 0) {
            // 下载文件
            window.location.href = data.data;
            this.$message({
              type: "success",
              message: "导出成功",
            });
          } else {
            this.$message.error("导出失败");
          }
        })
    },
  }
}
</script>

<style scoped>
.toolbar-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
